1 files changed, 89 insertions, 0 deletions
diff --git a/src/app/(main)/teams/[teamId]/TeamEditForm.tsx b/src/app/(main)/teams/[teamId]/TeamEditForm.tsx
new file mode 100644
index 0000000..74e038f
--- /dev/null
+++ b/src/app/(main)/teams/[teamId]/TeamEditForm.tsx
@@ -0,0 +1,89 @@
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormField,
+  FormSubmitButton,
+  IconLabel,
+  Row,
+  TextField,
+} from '@umami/react-zen';
+import { useMessages, useTeam, useUpdateQuery } from '@/components/hooks';
+import { RefreshCw } from '@/components/icons';
+import { getRandomChars } from '@/lib/generate';
+
+const generateId = () => `team_${getRandomChars(16)}`;
+
+export function TeamEditForm({
+  teamId,
+  allowEdit,
+  showAccessCode,
+  onSave,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+  showAccessCode?: boolean;
+  onSave?: () => void;
+}) {
+  const team = useTeam();
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
+
+  const { mutateAsync, error, isPending, touch, toast } = useUpdateQuery(`/teams/${teamId}`);
+
+  const handleSubmit = async (data: any) => {
+    await mutateAsync(data, {
+      onSuccess: async () => {
+        toast(formatMessage(messages.saved));
+        touch('teams');
+        touch(`teams:${teamId}`);
+        onSave?.();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ ...team }}>
+      {({ setValue }) => {
+        return (
+          <>
+            <FormField name="id" label={formatMessage(labels.teamId)}>
+              <TextField isReadOnly allowCopy />
+            </FormField>
+            <FormField
+              name="name"
+              label={formatMessage(labels.name)}
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField isReadOnly={!allowEdit} />
+            </FormField>
+            {showAccessCode && (
+              <Row alignItems="flex-end" gap>
+                <FormField
+                  name="accessCode"
+                  label={formatMessage(labels.accessCode)}
+                  style={{ flex: 1 }}
+                >
+                  <TextField isReadOnly allowCopy />
+                </FormField>
+                {allowEdit && (
+                  <Button
+                    onPress={() => setValue('accessCode', generateId(), { shouldDirty: true })}
+                  >
+                    <IconLabel icon={<RefreshCw />} label={formatMessage(labels.regenerate)} />
+                  </Button>
+                )}
+              </Row>
+            )}
+            {allowEdit && (
+              <FormButtons justifyContent="flex-end">
+                <FormSubmitButton variant="primary" isPending={isPending}>
+                  {formatMessage(labels.save)}
+                </FormSubmitButton>
+              </FormButtons>
+            )}
+          </>
+        );
+      }}
+    </Form>
+  );
+}